<template>
<div class="main">
<div class="sear">
  <el-input class="wit" placeholder="艺术家 / 单曲 / 风格 / 场景" v-model="value" @blur="add(value)"/>
  <el-button @click="del">取消</el-button>
</div>
  <div class="res" v-show="value">
    <ul class="table">
      <li v-for="tab in values" class="lis" @click="addv(tab)">
        <div :style="{ backgroundImage: `url(${tab.cover})` }" class="imgl"></div>
        <div class="text">{{tab.name}}</div>
        <div class="text tex2">{{tab.artist}}</div>
      </li>
    </ul>
  </div>

</div>

</template>

<script>
export default {
  name: "Searchs",
  data(){
    return{
      keyword: ' ',
        value:"",
      values:{

      }
    }
  },
  methods:{
    del(){
      this.value=""
    },
    add(v){
      console.log(v)


      let _this=this;
      axios.get('http://localhost:8181/search/'+encodeURI(v)).then(function (resp){
        console.log(resp.data)
        _this.values=resp.data;
      })
    },
    addv(tab){
      this.$store.commit('setSearchData',tab);
    }
  }

}
</script>

<style scoped>
.main{
  display: block;
  width:1024px;
  height: 100px;
  box-sizing: border-box;
}
.wit{
  background: #f8f8f8;
  border-radius: 2px;
  line-height: 38px;
  height: 38px;
  font-size: 13px;
  color: #4a4a4a;
  width: 500px;
  margin-right: 15px;
}
input{
  border: none;
}
.res{
  display: block;
}
ul{
  display: block;
}
li{
  border-radius: 5px;
  display: block;
}
li:hover{
  background: linear-gradient(91deg,#f1eefc,#9dc6ff 70%,#a5bcff);
}

.imgl{

  width: 42px;
  height: 42px;
  background-size: cover;
}
.lis{
  width: 100%;
  display: flex;
  height: 45px;
  border-bottom: 1px solid #eaeaea;
}

.tex2{
  font-weight: 400;
  color: #64646c;
  font-size: 10px;
  margin-top: 20px;
}
.text{
  margin-top: 15px;
  margin-left: 10px;
}
* {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Source Han Sans CN,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
  font-weight: 400;
}

</style>